<template>
  <div class="content-box">
    <div class="content" style="border-radius: 6px">
      <el-tabs v-model="tavIndex" :tab-position="tabPosition" @tab-click="tabIndexChange">
        <el-tab-pane :label="tabItem" v-for="(tabItem,index) in labelList" :key="index">
          <div ref="searchBox" class="search-box flex" v-show="showSearch">
            <el-form
              :model="queryParams"
              ref="queryForm"
              :inline="true"
              label-width="100px"
            >
            <el-form-item
                label="关联公司"
                prop="companyIds"
                v-if="['产品报表','产品撞库'].includes(tabItem)"
              >
                <el-select
                  v-model="queryParams.companyIds"
                  multiple
                  collapse-tags
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px; margin-right: 20px"
                >
                  <el-option
                    v-for="(item, index) in downCompanyOptionList"
                    :key="index"
                    :label="item.companyName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
               v-if="['产品报表'].includes(tabItem)"
               label="产品类型" prop="productType">
                <el-select
                 v-model="queryParams.productType"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 240px; margin-right: 20px"
                >
                  <el-option
                   v-for="(item, index) in productTypeOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                   ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="下游产品"
                prop="productIds"
                v-if="['产品报表','产品撞库'].includes(tabItem)"
              >
                <el-select
                  v-model="queryParams.productIds"
                  multiple
                  collapse-tags
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px; margin-right: 20px"
                >
                  <el-option
                    v-for="(item, index) in downProductOptionList"
                    :key="index"
                    :label="item.productName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="关联公司"
                prop="companyIds"
                v-if="['渠道报表','渠道撞库'].includes(tabItem)"
              >
                <el-select
                  v-model="queryParams.companyIds"
                  multiple
                  collapse-tags
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px; margin-right: 20px"
                >
                  <el-option
                    v-for="(item, index) in upCompanyOptionList"
                    :key="index"
                    :label="item.companyName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item 
              v-if="['渠道报表'].includes(tabItem)"
              label="渠道类型" prop="productType">
                <el-select
                 v-model="queryParams.productType"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 240px; margin-right: 20px"
                >
                  <el-option
                   v-for="(item, index) in channelTypeOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                   ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="上游渠道"
                prop="productIds"
                v-if="['渠道报表','渠道撞库'].includes(tabItem)"
              >
                <el-select
                  v-model="queryParams.productIds"
                  multiple
                  collapse-tags
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px; margin-right: 20px"
                >
                  <el-option
                    v-for="(item, index) in upChannelOptionList"
                    :key="index"
                    :label="item.productName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item 
              label="撞库成功类型" prop="dataType"
              v-if="['产品报表','渠道报表'].includes(tabItem)"
              >
                <el-select
                 v-model="queryParams.dataType"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 240px; margin-right: 20px"
                >
                  <el-option
                   v-for="(item, index) in dataTypeOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                   ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item 
              label="管理人" prop="manageUserIds"
              v-if="['产品报表','渠道报表'].includes(tabItem)"
              >
                <el-select
                  v-model="queryParams.manageUserIds"
                  multiple
                  collapse-tags
                  clearable
                  filterable
                  placeholder="请选择管理人"
                  style="width: 240px; margin-right: 20px"
                >
                  <el-option
                    v-for="(item, index) in manageOptionList"
                    :key="index"
                    :label="item.userName"
                    :value="item.userId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item 
              label="数据范围" prop="range"
              v-if="['产品报表','渠道报表'].includes(tabItem)"
              >
                <el-select
                 v-model="queryParams.range"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 240px; margin-right: 20px"
                 @change="rangeChange"
                >
                  <el-option
                   v-for="(item, index) in rangeOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                   ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
              v-if="queryParams.range"
              label="查询时间" prop="dateRange">
                <el-date-picker
                  :style="{width: device === 'mobile'? '280px' :'355px', marginRight: '20px'}"
                  clearable
                  v-model="dateRange"
                  type="datetimerange"
                  range-separator="至"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="handleQuery"
                  plain
                  >查询</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetQuery"
                  >重置</el-button
                >
                <el-button
                  v-if="queryParams.range"
                  type="success"
                  size="mini"
                  @click="exportExcel(tabItem)"
                  >导出</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="table-box" style="padding-top: 0;">
            <el-row :gutter="10" class="mb8">
              <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="handleQuery"
                :columns="columns"
              ></right-toolbar>
            </el-row>
            <el-table
              v-sticky-header="{offsetTop: '-5px'}"
              ref="table"
              v-loading="loading"
              
              :data="dataList"
              :span-method="['渠道撞库','产品撞库'].includes(tabItem)?objectSpanMethod:null"
              :border="['渠道撞库','产品撞库'].includes(tabItem)"
            >
              <template v-for="(item,index) in columns">
                <el-table-column
                  :key="item.prop"
                  :label="item.label"
                  :prop="item.prop"
                  :width="getColumnWidth(index)"
                  align="center"
                  :fixed="item.fixed"
                  :sortable="item.sortable ? item.sortable : false"
                  :show-overflow-tooltip="item.showTooltip"
                  v-if="tabChangeTabShow && item.visible"
                >
                  <template slot-scope="scope">
                    <!-- 采量渠道单独处理 -->
                    <template v-if="item.prop === 'isPick'">
                      <el-tag 
                        :type="isPickColor(scope.row[item.prop])" 
                        >
                        {{ ArrayFormatObj(isPickOption)[scope.row[item.prop]]}}
                      </el-tag>
                    </template>
                    <!-- 渠道状态单独处理 -->
                    <template v-else-if="item.prop === 'statusStr'">
                      <el-tag :type="getTagColor(scope.row['status'])">{{ scope.row[item.prop] }}</el-tag>
                    </template>
                    <!-- 操作单独处理 -->
                    <div v-else-if="item.prop === 'operation'">
                         <el-popconfirm
                          :title="`确定重置该${tabItem}数据吗？`"
                          @confirm="clickReset(scope.row)"
                        >
                          <el-button
                            slot="reference"
                            size="mini"
                            type="primary"
                            >重置</el-button
                          >
                        </el-popconfirm>
                    </div>
                    <span v-else>{{scope.row[item.prop]}}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
            <!-- 使用分页插件 -->
            <pagination
              v-show="total > 0"
              :total="total"
              :page-sizes="[10, 50, 100, 200, 500]"
              :page.sync="queryParams.pageIndex"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { querySysUserManageList } from "@/api/system/userManage";
import { getUpCompanyList } from "@/api/business/upCompanyManagement";
import { getDwnCompanyList } from "@/api/business/downCompanyManagement";
import { getDownProductList } from "@/api/business/productManagement";
import { getUpChannelList } from "@/api/business/channelManagement";
import { 
  queryDownProductDayByPage,
  queryDownProductHistoryByPage,
  queryUpProductDayByPage,
  queryUpProductHistoryByPage,
  queryUpAndDownRelationByPage,
  deleteUpAndDownRelation,
  queryDownAndUpRelationByPage,
  deleteDownAndUpRelation
} from "@/api/dataCenter/operationReport";

import tableStickyMixins from "@/mixins/tableStickyMixins";
import { mapGetters } from "vuex";
import moment from "moment";

export default {
  // 定义名字用于标识该组件是否被keep-alive缓存
  name: "OperationReport",
  data() {
    return {
      // 列表数据
      dataList: [],
      // 渠道类型筛选项
      channelTypeOption: [
        { label: "api全流程",value: 1, },
        { label: "api半流程",value: 2, },
        { label: "H5半流程",value: 3, },
      ],
      // 产品类型筛选项
      productTypeOption: [
        { label: "api-全流程",value: 1, },
        { label: "api-半流程",value: 2, },
        { label: "CRM(用我们系统)",value: 3, },
      ],
      // 撞库成功类型筛选项
      dataTypeOption:[
        { label: "全部",value: null, },
        { label: "无数据",value: 0, },
        { label: "有数据",value: 1, },
      ],
      // 数据范围
      rangeOption:[
        { label: "当日数据",value: 0, },
        { label: "历史数据",value: 1, },
      ],
      // 采量渠道筛选项
      isPickOption:[
        { label: "助贷", value: 0 },
        { label: "采量", value: 1 },
        // { label: "未知", value: null },
      ],
      pickerOptions: {
        disabledDate(time) {
          const today = new Date();
          today.setHours(0, 0, 0, 0); // 设置为今天的零点
          return time.getTime() >= today.getTime(); // 禁用今日及之后的日期
        }
      },

      // 管理人筛选项
      manageOptionList: [],
      // 下游公司筛选项
      downCompanyOptionList: [],
      // 上游公司筛选项
      upCompanyOptionList: [],
      // 下游产品筛选项
      downProductOptionList: [],
      // 上游渠道筛选项
      upChannelOptionList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
        // 默认当日数据
        range:0
      },
      // 时间范围
      dateRange: [],
      loading: false,
      // 表格列信息
      columns: [],
      // 显示搜索栏
      showSearch: true,
      // 当前tab激活项
      tavIndex:'0',
      // label集合
      labelList:[
        "产品报表",
        "渠道报表",
        "渠道撞库",
        "产品撞库"
      ],
      // 当时数据分页查询方法集合
      pageMethodsList:[
        queryDownProductDayByPage,
        queryUpProductDayByPage,
        queryUpAndDownRelationByPage,
        queryDownAndUpRelationByPage
      ],
      // 历史数据分页查询方法集合
      historyPageMethodsList:[
        queryDownProductHistoryByPage,
        queryUpProductHistoryByPage,
      ],
      // tab切换中的表格的显示状态
      tabChangeTabShow:true
    };
  },
  mixins: [tableStickyMixins],
  created() {
    this.getManageList();
    this.getCompanyOptionList();
    this.getProductList()
    this.getChannelList()
    this.init();
  },
  watch: {
    'device':{
      handler() {
        // 重新设置列表信息
        this.$set(this,'columns',
         this.tavIndex === '0'?this.productColumnsList:
         (this.tavIndex === '1'?this.channelColumnsList:
          (this.tavIndex === '2'?this.channelCollisionLibraryColumnsList:
            this.productCollisionLibraryColumnsList)
         )
        )
        // 对 Table 进行重新布局
        this.$refs.table[this.tavIndex].doLayout();
      },
      deep: true,
    }
  },
  computed: {
    ...mapGetters(["sidebar", "device"]),
    // 计算当前el-tabs位置形式
    tabPosition(){
      return this.device === 'mobile'? 'top': 'left'
    },
    // 产品表格信息计算属性
    productColumnsList(){
      return [
        { label: `产品名称`,prop: "productName",visible: true,pcWidth: 200,mobileWidth: 100,fixed: 'left',showTooltip: true,},  
        { label: `公司名称`,prop: "companyName",visible: true,pcWidth: 200,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `类型`,prop: "productTypeStr",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `统计日期`,prop: "billTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `结算模式`,prop: "rewardTypeStr",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `撞库数`,prop: "checkAllNum",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `撞库成功数`,prop: "checkOkNum",visible: true,pcWidth: 130,mobileWidth: 120,fixed: null,showTooltip: true,sortable:true},
        { label: `撞库成功率(%)`,prop: "checkOkRatio",visible: true,pcWidth: 150,mobileWidth: 130,fixed: null,showTooltip: true,sortable:true},
        { label: `进件数`,prop: "pushAllNum",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `进件成功数`,prop: "pushOkNum",visible: true,pcWidth: 130,mobileWidth: 120,fixed: null,showTooltip: true,sortable:true},
        // { label: `进件率(%)`,prop: "pushAllRatio",visible: true,pcWidth: 130,mobileWidth: 120,fixed: null,showTooltip: true,sortable:true},
        { label: `进件成功率`,prop: "pushOkRatio",visible: true,pcWidth: 150,mobileWidth: 120,fixed: null,showTooltip: true,sortable:true},
        { label: `进件曝光率`,prop: "pushExposureRatio",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `回调曝光率`,prop: "notifyExposureRatio",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `总价格`,prop: "downSellMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `总成本`,prop: "sysSellMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `总收益`,prop: "sysRevenueMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `均价`,prop: "avMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `ROI`,prop: "roi",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `回调总量`,prop: "notifyAllNum",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `回调成功数`,prop: "notifyOkNum",visible: true,pcWidth: 150,mobileWidth: 150,fixed: null,showTooltip: true,sortable:true},
        { label: `回调成功率`,prop: "notifyOkRatio",visible: true,pcWidth: 150,mobileWidth: 150,fixed: null,showTooltip: true,sortable:true},
        { label: `曝光总量`,prop: "exposureAllNum",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `曝光跳转成功数`,prop: "exposureOkNum",visible: true,pcWidth: 150,mobileWidth: 150,fixed: null,showTooltip: true,sortable:true},
        { label: `曝光跳转成功率`,prop: "exposureOkRatio",visible: true,pcWidth: 150,mobileWidth: 150,fixed: null,showTooltip: true,sortable:true},
        { label: `管理员`,prop: "manageUserName",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
      ]
    },
    // 渠道表格信息计算属性
    channelColumnsList(){
      return [
        { label: `渠道名称`,prop: "productName",visible: true,pcWidth: 200,mobileWidth: 100,fixed: 'left',showTooltip: true,},  
        { label: `公司名称`,prop: "companyName",visible: true,pcWidth: 200,mobileWidth: 100,fixed:null,showTooltip: true,},
        { label: `类型`,prop: "productTypeStr",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `统计日期`,prop: "billTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `结算模式`,prop: "rewardTypeStr",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `撞库数`,prop: "checkAllNum",visible: true,pcWidth: 130,mobileWidth: 120,fixed: null,showTooltip: true,sortable:true},
        { label: `撞库成功数`,prop: "checkOkNum",visible: true,pcWidth: 130,mobileWidth: 120,fixed: null,showTooltip: true,sortable:true},
        { label: `有效撞库数`,prop: "checkValidNum",visible: true,pcWidth: 130,mobileWidth: 120,fixed: null,showTooltip: true,sortable:true},
        { label: `撞库成功率(%)`,prop: "checkOkRatio",visible: true,pcWidth: 150,mobileWidth: 130,fixed: null,showTooltip: true,sortable:true},
        { label: `进件数`,prop: "pushAllNum",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `有效进件数`,prop: "pushRealNum",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
       
        { label: `进件成功数`,prop: "pushOkNum",visible: true,pcWidth: 130,mobileWidth: 120,fixed: null,showTooltip: true,sortable:true},
        // { label: `进件率(%)`,prop: "pushAllRatio",visible: true,pcWidth: 130,mobileWidth: 120,fixed: null,showTooltip: true,sortable:true},
        { label: `进件成功率`,prop: "pushOkRatio",visible: true,pcWidth: 150,mobileWidth: 120,fixed: null,showTooltip: true,sortable:true},
        { label: `进件曝光率`,prop: "pushExposureRatio",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `回调曝光率`,prop: "notifyExposureRatio",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `总价格`,prop: "sysSellMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `总成本`,prop: "upRewardMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `总收益`,prop: "sysRevenueMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `均价`,prop: "avMoney",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `ROI`,prop: "roi",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `回调总量`,prop: "notifyAllNum",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `回调成功数`,prop: "notifyOkNum",visible: true,pcWidth: 150,mobileWidth: 150,fixed: null,showTooltip: true,sortable:true},
        { label: `回调成功率`,prop: "notifyOkRatio",visible: true,pcWidth: 150,mobileWidth: 150,fixed: null,showTooltip: true,sortable:true},
        { label: `曝光总量`,prop: "exposureAllNum",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,sortable:true},
        { label: `曝光跳转成功数`,prop: "exposureOkNum",visible: true,pcWidth: 150,mobileWidth: 150,fixed: null,showTooltip: true,sortable:true},
        { label: `曝光跳转成功率`,prop: "exposureOkRatio",visible: true,pcWidth: 150,mobileWidth: 150,fixed: null,showTooltip: true,sortable:true},
        { label: `管理员`,prop: "manageUserName",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
      ]
    },
    // 渠道撞库表格信息计算属性
    channelCollisionLibraryColumnsList(){
      return [
        { label: `渠道名称`,prop: "channelName",visible: true,pcWidth: 'auto',mobileWidth: 100,fixed: null,showTooltip: true,},  
        { label: `采量渠道`,prop: "isPick",visible: true,pcWidth: 'auto',mobileWidth: 100,fixed: null,showTooltip: true,},  
        { label: `渠道状态`,prop: "statusStr",visible: true,pcWidth: 'auto',mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `产品名称`,prop: "child_productName",visible: true,pcWidth: 'auto',mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `操作`,prop: "operation",visible: true,pcWidth: 100,mobileWidth: 80,fixed: "right",},
      ]
    },
     // 产品撞库表格信息计算属性
     productCollisionLibraryColumnsList(){
      return [
        { label: `产品名称`,prop: "channelName",visible: true,pcWidth: 'auto',mobileWidth: 100,fixed: null,showTooltip: true,},  
        { label: `产品状态`,prop: "statusStr",visible: true,pcWidth: 'auto',mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `渠道名称`,prop: "child_productName",visible: true,pcWidth: 'auto',mobileWidth: 100,fixed: null,showTooltip: true,},
        { label: `操作`,prop: "operation",visible: true,pcWidth: 100,mobileWidth: 80,fixed: "right",},
      ]
    },
    // 标签颜色值
    getTagColor(){
      return (type)=>{
         switch (type) {
          case 0:
            return 'success';
          case 1:
            return 'warning';
          case 2:
            return 'danger';
          default:
            return 'info';
        }
      }
    },
    // 采量渠道标签颜色处理
    isPickColor:()=>{
        return (state)=>{
           switch(state){
             case 0:
                return 'success';
             case 1:
                return 'warning';
             case null:
                return 'info';
             default:
           }
        }
    },
    // 将数组转换为对象形式
    ArrayFormatObj:()=>{
       return (arr)=>{
         return arr.reduce((pre, cur)=>{
           pre[cur.value] = cur.label;
           return pre;
         },{})
       }
    },
  },
  methods: {
    // 计算当前列元素在所处设备的宽度
    getColumnWidth(index) {
      return this.isMobile
        ? this.columns[index].mobileWidth
        :this.columns[index].pcWidth ;
    },
    init() {
      if(this.queryParams?.range){
        // 初始时间
        this.$set(this, "dateRange", [
          moment().format("YYYY-MM-DD 00:00:00"),
          moment().format("YYYY-MM-DD 23:59:59"),
        ]);
      }
      // 初始化列表信息
      this.$set(this,'columns',
         this.tavIndex === '0'?this.productColumnsList:
         (this.tavIndex === '1'?this.channelColumnsList:
          (this.tavIndex === '2'?this.channelCollisionLibraryColumnsList:
            this.productCollisionLibraryColumnsList)
         )
      )
      this.getList();
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 过滤隐藏项合并父级列,排除操作项
      if (!this.columns.filter(pre=>pre?.visible)[columnIndex].prop.includes('child_') && !this.columns.filter(pre=>pre?.visible)[columnIndex].prop.includes('operation')) {
          if (row?.childNum) {
            return {
              rowspan: row?.childNum,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
      } 
    },
    exportExcel(name){
       if (this.dateRange?.length) {
         this.queryParams.billTimeStart = this.dateRange[0];
         this.queryParams.billTimeEnd = this.dateRange[1];
       } else {
         delete this.queryParams.billTimeStart;
         delete this.queryParams.billTimeEnd;
       }
       if(name === '产品报表'){
         this.download('/report/operation/v1.0.0/downHistoryExport',this.queryParams,`${name}_${new Date().getTime()}.xlsx`)
       }else{
         this.download('/report/operation/v1.0.0/upHistoryExport',this.queryParams,`${name}_${new Date().getTime()}.xlsx`)
       }
    },
    // 切换tab回调
    tabIndexChange(){
      console.log('索引',this.tavIndex);
      // 重置初始查询条件并重新查询
      this.resetQuery()
      // tab切换中的表格为隐藏状态
      this.tabChangeTabShow = false
    },
    // 数据范围切换回调
    rangeChange(){
      if(!this.queryParams?.range){
        this.$set(this,'dateRange',[])
      }
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      if (this.dateRange?.length) {
        this.queryParams.billTimeStart = this.dateRange[0];
        this.queryParams.billTimeEnd = this.dateRange[1];
      } else {
        delete this.queryParams.billTimeStart;
        delete this.queryParams.billTimeEnd;
      }
      // console.log('查询参数',this.queryParams);
      this[this.queryParams?.range?'historyPageMethodsList':'pageMethodsList'][this.tavIndex](this.queryParams).then((response) => {
        // 加载完成后设置为显示状态
        this.tabChangeTabShow = true
        this.dataList = response?.data?.list
        // 如果是撞库报表单独处理，进行合并处理
        if(['2','3'].includes(this.tavIndex)){
          this.dataList = response?.data?.list?.reduce((arr,pre)=>{
            
            if(pre?.productList?.length){
              // 设置子项数量
              arr.push(...pre.productList.map((item,index)=>{
                // 如果为初始项设置子项数量
                if(index === 0){
                  return {
                    ...pre,
                    'child_productName': item,
                    // 设置子项数量
                    childNum:pre?.productList?.length
                  }
                }
                return {
                  ...pre,
                  'child_productName': item,
                }
              }))
            }else{
              arr.push(pre)
            }
            return arr
          },[])
        }
        console.log(this.dataList);
        this.total = response?.data?.total;
        this.loading = false;
      }).catch((err) => {
          setTimeout(() => {// 延迟2s后自动取消加载状态
            this.loading = false;
          }, 2000);
      })
    },
    // 获取管理人列表
    getManageList() {
      querySysUserManageList().then((res) => {
        this.manageOptionList = res?.data;
      });
    },
    // 获取公司筛选项列表
    getCompanyOptionList() {
      // 获取上游公司列表
      getUpCompanyList().then((res) => {
        this.upCompanyOptionList = res.data;
      });
      // 获取下游公司列表
      getDwnCompanyList().then((res) => {
        this.downCompanyOptionList = res.data;
      });
    },
    // 获取产品筛选项列表
    getProductList(){
      // 获取下游产品列表
      getDownProductList().then((res) => {
        this.downProductOptionList = res.data;
      });
    },
    // 获取渠道筛选项列表
    getChannelList(){
      // 获取上游渠道列表
      getUpChannelList().then((res) => {
        this.upChannelOptionList = res.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$set(this.queryParams, "pageIndex", 1);
      this.getList();
    },
     // 点击重置数据操作
     clickReset(row){
      let fun = this.tavIndex === '2'?deleteUpAndDownRelation:deleteDownAndUpRelation
      fun({
        channelId:row?.channelId
      }).then(res=>{
        if(res.code === 200){
          this.$message.success("重置成功");
          this.getList();
        }
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      // 完全重置到初始状态
      this.$set(this, "queryParams", {
        pageIndex: 1,
        pageSize: 10,
        // 默认当日数据
        range:0
      });
      // 重置时间范围
      this.$set(this, "dateRange", []);
      this.init();
    },
  },
};
</script>

<style scoped lang='scss'>
.search-box {
  padding: 20px 20px 0;
  background: #fff;
  align-items: flex-start;
  border-radius: 6px;
}
.search-area {
  position: absolute;
  right: 20px;
}
.content {
  // min-height: 100%;
  padding: 20px;
  background: #fff;
}
.el-table {
    // 滚动条加粗
    --scrollbar-height: 9px;
}
::v-deep .el-tabs__content{
  height: calc(100vh - 166px);
  overflow-y: auto;
}
</style>